<template>
    <ul>  <!-- 如果 ref 值是字符串形式，在元素被渲染后包含对应整个列表的所有元素【数组】 -->
        <li v-for="b in books" :key="b.id" ref="bookList">
            {{ b.name }}
        </li>
    </ul>
    <button @click="changeBookListStyle">点我查看 bookList</button>

    <hr>
    <ul> <!-- 如果ref值是函数形式，则会每渲染一个列表元素则会执行对应的函数【不推荐使用】 -->
        <li v-for="s in students" :key="s.id" :ref="studentsRef">
            {{ s.name }}
        </li>
    </ul>
</template>

<script>
export default {
    data: () => ({
        books: [
            {id: 1, name: '红楼梦'},
            {id: 2, name: '三国演义'},
            {id: 3, name: '水浒传'},
            {id: 4, name: '西游记'}
        ],
        students: [
            {id: 1, name: 'Jack'},
            {id: 2, name: 'Annie'},
            {id: 3, name: 'Tom'}
        ]
    }),
    methods: {
        changeBookListStyle() {
            console.log(this.$refs.bookList)
            this.$refs.bookList[2].style = 'color: red'
        },
        studentsRef(el) {
            console.log(el)
        }
    }
}
</script>

<script setup>
import {onMounted, ref} from 'vue';

let books = ref([ // 书本
    {id: 1, name: '海底两万里'},
    {id: 2, name: '骆驼祥子'},
    {id: 3, name: '老人与海'},
    {id: 4, name: '安徒生童话'},
])
let bookList = ref(null)

onMounted(() => {
    console.log(bookList.value); // 获取引用的 DOM 对象，并打印，发现那么是数组，
    bookList.value[2].className = 'error'
})
</script>